import React, { Component } from 'react';
import {
  View,
  StyleSheet,
  ActivityIndicator,
  Image,
  ScrollView,
} from 'react-native';

import { Icon } from 'react-native-elements';
import {
  Navbar,
  Button,
  HText,
  Divider,
} from '../../DodLibrary/index';


// Button
class ButtonPage extends Component {
  render() {
    const {
      navigation,
    } = this.props;
    return (
      <View
        style={styles.container}>
        <Navbar
          title="Button"
          leftIcon={{
            name: 'apps',
          }}
          leftOnPress={() => navigation.navigate('DrawerOpen')}
        />
        <ScrollView
          contentContainerStyle={{ backgroundColor: '#fff' }}
          endFillColor="red">
          {/* disply area */}
          <HText.H20>
            ripple button
          </HText.H20>
          {/* ripple button */}
          <Divider />
          {/* only icon */}
          <Button.Ripple
            icon={<Icon name="delete" size={20} color="#e91e61" />}
            wrapperStyle={{ alignSelf: 'flex-start' }} />
          <Divider />

          {/* only text */}
          <Button.Ripple
            color="#e91e63"
            wrapperStyle={{ alignSelf: 'flex-start' }}>
            hello Inuyasha
          </Button.Ripple>
          <Divider />

          {/* change text style */}
          <Button.Ripple
            icon={<Icon name="delete" size={20} color="#e91e61" />}
            wrapperStyle={{ alignSelf: 'flex-start' }} >
            hello Inuyasha
          </Button.Ripple>
          <Divider />

          {/* icon and text */}
          <Button.Ripple
            color="#108eeb"
            iconRight
            onPress={() => alert('pressed')}
            onLongPress={() => alert('longpress')}
            icon={<Icon name="delete" size={20} color="#e91e61" />}
            wrapperStyle={{ alignSelf: 'flex-start' }}
            textStyle={{ color: 'cyan' }}>
            hello Inuyasha
          </Button.Ripple>
          <Divider />

          {/* indicator and text */}
          <Button.Ripple
            icon={<ActivityIndicator color="yellow" />}
            wrapperStyle={{ alignSelf: 'flex-start' }}
            textStyle={{ color: 'yellow' }}>
            hello Inuyasha
          </Button.Ripple>
          <Divider />

          {/* icon right */}
          <Button.Ripple
            iconRight
            icon={<ActivityIndicator color="yellow" />}
            wrapperStyle={{ alignSelf: 'flex-start' }}
            textStyle={{ color: 'yellow' }}>
            hello Inuyasha
          </Button.Ripple>
          <Divider />

          {/* only indicator */}
          <Button.Ripple
            icon={<ActivityIndicator color="#fff" />}
            wrapperStyle={{ alignSelf: 'flex-start' }} />
          <Divider />

          {/* Image button */}
          <Button.Ripple
            icon={<Image source={{ uri: 'http://qiniu.enjoymemory.cn/image/icons/dashboard_64x64.png', width: 20, height: 20 }} />}
            wrapperStyle={{ alignSelf: 'flex-start' }} />
          <Divider />

          {/* button */}
          <Button.Ripple
            icon={<Image source={{ uri: 'http://qiniu.enjoymemory.cn/image/icons/dashboard_64x64.png', width: 20, height: 20 }} />} />
          <Divider />

          {/* to change the width of the button, only need to change the alignSelf style prop */}
          {/* <<--------------------------------------------------------------------->> */}
          <HText.H20>
            opacity button
          </HText.H20>
          <Divider />
          {/* only icon */}
          <Button.Opacity
            icon={<Icon name="delete" size={20} color="#e91e61" />}
            wrapperStyle={{ alignSelf: 'flex-start' }} />
          <Divider />

          {/* only text */}
          <Button.Opacity
            wrapperStyle={{ alignSelf: 'flex-start' }} >
            hello Inuyasha
          </Button.Opacity>
          <Divider />

          {/* change text style */}
          <Button.Opacity
            icon={<Icon name="delete" size={20} color="#e91e61" />}
            wrapperStyle={{ alignSelf: 'flex-start' }} >
            hello Inuyasha
          </Button.Opacity>
          <Divider />

          {/* icon and text */}
          <Button.Opacity
            radius={20}
            onLongPress={() => alert('longpress')}
            icon={<Icon name="delete" size={20} color="#e91e61" />}
            wrapperStyle={{ alignSelf: 'flex-start' }}
            textStyle={{ color: 'cyan' }}>
            hello Inuyasha
          </Button.Opacity>
          <Divider />

          {/* indicator and text */}
          <Button.Opacity
            iconRight
            icon={<ActivityIndicator color="yellow" />}
            wrapperStyle={{ alignSelf: 'flex-start' }}
            textStyle={{ color: 'yellow' }}>
            hello Inuyasha
          </Button.Opacity>
          <Divider />

          {/* only indicator */}
          <Button.Opacity
            icon={<ActivityIndicator color="#fff" />}
            wrapperStyle={{ alignSelf: 'flex-start' }} />
          <Divider />

          {/* Image button */}
          <Button.Opacity
            icon={<Image source={{ uri: 'http://qiniu.enjoymemory.cn/image/icons/dashboard_64x64.png', width: 20, height: 20 }} />}
            wrapperStyle={{ alignSelf: 'flex-start' }} />
          <Divider />

          {/* button */}
          <Button.Opacity
            icon={<Image source={{ uri: 'http://qiniu.enjoymemory.cn/image/icons/dashboard_64x64.png', width: 20, height: 20 }} />} />
          <Divider />

          <Button.Opacity>
            hello Inuyasha
          </Button.Opacity>

          {/* <<--------------------------------------------------------------------->> */}
          <HText.H20>
            border button
          </HText.H20>
          <Divider vertical={5} />
          {/* only icon */}
          <Button.Border
            borderColor="#000"
            icon={<Icon name="delete" size={20} color="#e91e61" />}
            wrapperStyle={{ alignSelf: 'flex-start' }} />
          <Divider />

          {/* only text */}
          <Button.Border
            borderColor="#000"
            wrapperStyle={{ alignSelf: 'flex-start' }} >
            hello Inuyasha
          </Button.Border>
          <Divider />

          {/* change text style */}
          <Button.Border
            borderColor="#000"
            icon={<Icon name="delete" size={20} color="#e91e61" />}
            wrapperStyle={{ alignSelf: 'flex-start' }} >
            hello Inuyasha
          </Button.Border>
          <Divider />

          {/* icon and text */}
          <Button.Border
            borderColor="#000"
            onLongPress={() => alert('longpress')}
            icon={<Icon name="delete" size={20} color="#e91e61" />}
            wrapperStyle={{ alignSelf: 'flex-start' }}
            textStyle={{ color: 'cyan' }}>
            hello Inuyasha
          </Button.Border>
          <Divider />

          {/* indicator and text */}
          <Button.Border
            borderColor="#000"
            iconRight
            icon={<ActivityIndicator color="yellow" />}
            wrapperStyle={{ alignSelf: 'flex-start' }}
            textStyle={{ color: 'yellow' }}>
            hello Inuyasha
          </Button.Border>
          <Divider />

          {/* only indicator */}
          <Button.Border
            borderColor="#000"
            icon={<ActivityIndicator color="cyan" />}
            wrapperStyle={{ alignSelf: 'flex-start' }} />
          <Divider />

          {/* Image button */}
          <Button.Border
            borderColor="#000"
            icon={<Image source={{ uri: 'http://qiniu.enjoymemory.cn/image/icons/dashboard_64x64.png', width: 20, height: 20 }} />}
            wrapperStyle={{ alignSelf: 'flex-start' }} />
          <Divider />

          {/* button */}
          <Button.Border
            borderColor="#000"
            icon={<Image source={{ uri: 'http://qiniu.enjoymemory.cn/image/icons/dashboard_64x64.png', width: 20, height: 20 }} />} />
          <Divider />

          <Button.Border color="#e91e63" borderColor="transparent" radius={15} wrapperStyle={{ alignSelf: 'flex-start' }}>
            hello Inuyasha
          </Button.Border>
          <Divider />

          <Button.Border>
            hello Inuyasha
          </Button.Border>
          <Divider />

        </ScrollView>
      </View>
    );
  }
}

// ButtonPage.navigationOptions = navigationOptionsConfig.ButtonPage;

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default ButtonPage;
